<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="auture" content="腾">
        <title></title>
        <style>
            
        </style>
    </head>
    <body>
        <label>请选择省份
            <select name="" id="" autocomplete="off">
                <option value="0" selected>河南</option>
                <option value="1">湖南</option>
                <option value="2">湖北</option>
            </select>
        </label>
        <label for="city">请选择城市
            <select name="" id="city">
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
            </select>
        </label>
    </body>
</html>
<script>


    var province=document.querySelectorAll("label:nth-of-type(1) option");
    console.log(province[0].value);
    var henan=["郑州","济源","徐州","许昌"];
    var hunan=["长沙","衡阳","重阳","重庆"];
    var hubei=["武汉","孝感","黄冈","荆州"];
    var goal=[henan,hunan,hubei];
    var city=document.querySelectorAll("label:nth-of-type(2) option");
    // console.log(city[0].innerHTML);
    for(var i=0;i<province.length;i++){
        province[i].onclick=function(){
            // console.log(this.value);
            for(var l=0;l<city.length;l++){
                // 将对应数组的数据输入对应的位置
                city[l].innerHTML=goal[this.value][l];
            }
        }
    }
    // 初始化
        for(var l=0;l<city.length;l++){
                // 将对应数组的数据输入对应的位置
                city[l].innerHTML=goal[0][l];
            }
</script>